<template>
  <vxe-table :align="allAlign" :data="tableData1">
    <vxe-table-column type="seq" width="60"></vxe-table-column>
    <vxe-table-column field="name" title="Name"></vxe-table-column>
    <vxe-table-column field="sex" title="Sex"></vxe-table-column>
    <vxe-table-column field="age" title="Age"></vxe-table-column>
  </vxe-table>
</template>
<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const allAlign = ref(null);

    const tableData1 = ref([
      {
        id: 10001,
        name: "Test1",
        role: "Develop",
        sex: "Man",
        age: 28,
        address: "vxe-table 从入门到放弃"
      },
      {
        id: 10002,
        name: "Test2",
        role: "Test",
        sex: "Women",
        age: 22,
        address: "Guangzhou"
      },
      {
        id: 10003,
        name: "Test3",
        role: "PM",
        sex: "Man",
        age: 32,
        address: "Shanghai"
      },
      {
        id: 10004,
        name: "Test4",
        role: "Designer",
        sex: "Women ",
        age: 24,
        address: "Shanghai"
      }
    ]);

    return {
      allAlign,
      tableData1
    };
  }
});
</script>
